<template>
	<div id="Morecz">
	<!-- 标题 -->
		<div class="header" >
				<div class="return_btn">
					<router-link class="mui-icon mui-icon-back" to="/wechat"></router-link ></div>
				<div class="header_search">
						<span class="search_shop">楼口鲜果</span>
				</div>		
		</div>

	<!-- 全部商品 -->
		<div class="all_goods">
			<div class="all_title">
				<span v-for="(items,index) in arr"  v-bind:class="{all: index==isA}" @click="click(index)">{{items}}</span>
			</div>
			<ul class="all_cz_goods">
				<li v-for="(items,index) in  fresh_Fruit">
					<div class="cz_goods_img"><img :src="items.img" alt=""></div>
					<div class="shops_msg">
									<p class="shop_inform">{{items.information}}</p>
									<p class="shop_size">{{items.etalon}}</p>
									<p class="shop_arrive">次日达</p>
									<p class="shop_Price_cart">
										<span class="shop_price">￥{{items.price}}</span>
										<span class="shop_cart"><img src="../assets/img1/cart1_03.png" alt=""></span>
									</p>
								</div>
				</li>
			</ul>
		</div>
	</div>
	
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	a{
		color:#fff;
		font-size:2rem;
	}
	#Morecz{
		width: 100%;
		background: #f0f0f0;
	}
	.header{
		width: 100%;
		height:4rem;
		padding: 0.5rem 0;
		background: red;
		display: flex;
		justify-content:space-around;
	}
	.header_search{
		width: 90%;
		height:3rem;
		line-height: 3rem;
		text-align: center;
	}
	.header_search span{
		color:#fff;
		font-size: 2rem;
		margin-left: -15%;
	}
	.return_btn .mui-icon-back{
		font-size: 3.5rem;
		text-indent: -1rem;
		height:3rem;
		line-height: 3rem;
	}
	.return_btn a,.cancel_btn a{
		color:#fff;
		line-height: 2rem;
		font-size: 3.5rem;
	}
	
	/*全部商品*/
	.all_goods{
		width: 100%;	
	}
	.all_title{
		width: 100%;
		height:3rem;
		line-height: 3rem;
		color:#000;
		text-align: left; 
	}
	.all_title span{
		display: inline-block;
		padding-bottom: 0.2rem;
		padding: 0  0.5rem;
		font-size: 1.5rem;
	}
	.all{
		color:red;
		border-bottom: 0.1rem solid red;
	}
	.all_cz_goods{
		width: 100%;
		display: flex;
		margin-top: 0.2rem;
		justify-content: space-around;
		flex-wrap:wrap; 
		padding-bottom: 3rem;
	}
	.all_cz_goods li{
		width: 48%;
		background: #fff;
		margin-bottom: 0.5rem;
	}
	.cz_goods_img img{
		width: 100%;
	}
	.shop_size,.shop_arrive{
		height: 1.5rem;
		line-height: 1.5rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size:0.8rem;
	}
	.shops_msg p{
		text-align: left;
		text-indent: 0.5rem;
	}
	.shop_inform{
		white-space:nowrap;/* 不换行 */  
	    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */  
	    text-overflow:ellipsis;
	    color:#000;
	    
	}
	.shop_size,.shop_arrive{
		color:#8b8b8b;
	}
	.shop_price{
		color:red;
		font-size: 1.6rem;
	}
	.shop_Price_cart{
		display: flex;
		justify-content: space-between;
	}
	.shop_price{
		text-align: left;
	}
	.shop_cart{
		width: 2rem;
		margin-right: 0.5rem;
	}
	.shop_cart img{
		width: 1.5rem;
	}
</style>
<script>
	export default {
		data () {
			return{
				msg:"",
				fresh_Fruit:"",
				isA:false,
				arr:[
					"全部",
					"其他水果",
					"其他进口水果"
				]

			}
		},
		methods:{
			click:function(index){
				this.isA = index;
				// console.log(index);
				//水果种类切换
				if (this.isA==1){
					this.fresh_Fruit= (JSON.parse(localStorage.fruit)).slice(2,6);
					console.log(this.fresh_Fruit);
				}else if(this.isA==2){
					this.fresh_Fruit= (JSON.parse(localStorage.fruit)).slice(6,10);
				}else{
					this.fresh_Fruit= (JSON.parse(localStorage.fruit));
				}
			}
		},
		created:function(){
				this.fresh_Fruit= JSON.parse(localStorage.fruit);
				// console.log(this.fresh_Fruit);	
			}
		
	}
</script>